<template>
  <div class="keyword-archive-page">
    <article-list
      :articles="article.data.data"
      :fetching="article.fetching"
      :pagination="article.data.pagination"
      @loadmore="loadmoreArticle"
    />
  </div>
</template>

<script>
import { computed, defineComponent, onBeforeMount } from "vue";
import { useEnhandle } from "../enhandle";
import ArticleList from "@/components/archive/list.vue";

export default defineComponent({
  name: "Search",
  props: {
    keyword: {
      type: String,
      required: true,
    },
  },
  components: {
    ArticleList,
  },
  setup(props) {
    const { store } = useEnhandle();
    const article = computed(() => store.state.article.list);
    const nextPageParams = computed(() => {
      return Object.assign(
        {
          page: props.article.data.pagination.current_page + 1,
        },
        { keyword: props.keyword }
      );
    });

    const fetchList = (params) => {
      return store.dispatch("article/fetchList", params);
    };
    const loadmoreArticle = () => {
      store.dispatch("article/fetchList", nextPageParams.value);
    };

    onBeforeMount(() => {
      fetchList(props.keyword);
    });

    return {
      article,
      fetchList,
      loadmoreArticle,
    };
  },
});
</script>
